import React, { Component } from 'react'

export default class App extends Component {
  state = {
    // 这个属性用来收集表单中的数据
    username: '',
    password: '',
    isAgree: false,
    city: 'sh',
    hobby: [],
    sex: '',
    file: '',
  }

  handle = (e) => {
    // 如果type是checkbox,则使用e.target.checked
    // 如果type是file,则使用e.target.files[0]
    // 其他的都是e.target.value
    let value
    if (e.target.type === 'checkbox') {
      value = e.target.checked
    } else if (e.target.type === 'file') {
      value = e.target.files[0]
    } else {
      value = e.target.value.trim()
    }

    // 获取要修改的属性名
    const name = e.target.name

    this.setState({
      [name]: value,
    })
  }

  hobbyHandle = (e) => {
    // 怎么把选中的value值,存储到数组中,或从数据中删除指定value值
    const value = e.target.value // 选中或取消的爱好

    // 判断hobby数组中是否有这个值,如果有则删除,没有则添加
    const index = this.state.hobby.indexOf(value)
    // 这行代码是利用js中es6中的展示语法,将旧的数组中所有的数据,添加到了一个新的数组中
    const newHobby = [...this.state.hobby]
    if (index === -1) {
      //如果index是-1说明没有这个值,就添加
      newHobby.push(value)
    } else {
      // 如果index不是-1.说明有这个值,就删除
      newHobby.splice(index, 1) //会修改newHobby本身
    }
    this.setState({
      hobby: newHobby,
    })

    //如何获取用户输入的内容
    // this.setState({
    //   city: e.target.value,
    // })
  }

  render() {
    return (
      <form>
        用户名:
        {/* 受控组件: 一旦一个表单元素的值被react中的数据控制,则这个表单元素就可以成为受控组件 */}
        <input
          type="text"
          value={this.state.username}
          onChange={this.handle}
          name="username"
        />
        <br />
        密码:
        <input
          type="password"
          value={this.state.password}
          onChange={this.handle}
          name="password"
        />
        <br />
        城市:
        {/* 在html中选中option使用selected.但是react里面,建议我们给select的value赋值,值和某个option的value值相同,则对应的option被选中 */}
        <select
          name="city"
          id=""
          value={this.state.city}
          onChange={this.handle}
        >
          <option value="sz">深圳</option>
          <option value="bj">北京</option>
          <option value="sh">上海</option>
        </select>
        <br />
        是否同意规则:
        <input
          type="checkbox"
          checked={this.state.isAgree}
          onChange={this.handle}
          name="isAgree"
        />
        <br />
        {/* 以下这些无法受控,所以直接将用户选择的数据,直接存储到状态中即可 */}
        爱好:
        <br />
        抽烟:
        <input type="checkbox" value={'smoking'} onChange={this.hobbyHandle} />
        喝酒:
        <input type="checkbox" value={'drinking'} onChange={this.hobbyHandle} />
        找富婆:
        <input type="checkbox" value={'findRich'} onChange={this.hobbyHandle} />
        <br />
        {/* 注意: 如果标签上属性的值是一个字符串,可以忽略插值表达式. 其他数据类型不能忽略 */}
        男:
        <input type="radio" name="sex" value="male" onChange={this.handle} />
        女:
        <input type="radio" name="sex" value="female" onChange={this.handle} />
        <br />
        {/* 注意: 文件虽然只有一个标签,但是react中没有提供受控方式,所以直接将选中的文件对象添加到状态中即可 */}
        文件: <input type="file" onChange={this.handle} name="file" />
      </form>
    )
  }
}
